<template>
  <el-col :span="12">
    <el-card class="three-card box-card">
      <p class="typing" :class="`font-${target.length+1}`" v-if="target">
        {{ target }}
      </p>
    </el-card>
</el-col>
</template>

<script>
export default {
  name: 'RightAssembly',
  props: {
    target: {
      type: String
    }
  }
}
</script>

<style>
.font-1{
  width: 1em;
  animation: typing1 .5s steps(1, end),
             blink-caret .75s step-end infinite;
}
.font-2{
  width: 2em;
  animation: typing2 1s steps(2, end),
             blink-caret .75s step-end infinite;
}
.font-3{
  width: 3em;
  animation: typing3 1.5s steps(3, end),
             blink-caret .75s step-end infinite;
}
.font-4{
  width: 4em;
  animation: typing4 2s steps(4, end),
             blink-caret .75s step-end infinite;
}
.font-5{
  width: 5em;
  animation: typing5 2.5s steps(5, end),
             blink-caret .75s step-end infinite;
}
.font-6{
  width: 6em;
  animation: typing6 3s steps(6, end),
             blink-caret .75s step-end infinite;
}
.font-7{
  width: 7em;
  animation: typing7 3.5s steps(7, end),
             blink-caret .75s step-end infinite;
}
.font-8{
  width: 8em;
  animation: typing8 3.8s steps(8, end),
             blink-caret .75s step-end infinite;
}
.font-9{
  width: 9em;
  animation: typing9 4s steps(9, end),
             blink-caret .75s step-end infinite;
}
.font-10{
  width: 10em;
  animation: typing10 5.2s steps(10, end),
             blink-caret .75s step-end infinite;
}
.font-11{
  width: 11em;
  animation: typing11 5.4s steps(11, end),
             blink-caret .75s step-end infinite;
}
.font-12{
  width: 12em;
  animation: typing12 5.5s steps(12, end),
             blink-caret .75s step-end infinite;
}
.font-13{
  width: 13em;
  animation: typing13 5.6s steps(13, end),
             blink-caret .75s step-end infinite;
}
.font-14{
  width: 14em;
  animation: typing14 6s steps(14, end),
             blink-caret .75s step-end infinite;
}
.font-15{
  width: 15em;
  animation: typing15 7s steps(15, end),
             blink-caret .75s step-end infinite;
}
.font-16{
  width: 16em;
  animation: typing16 7.5s steps(16, end),
             blink-caret .75s step-end infinite;
}
.font-17{
  width: 17em;
  animation: typing17 8.2s steps(17, end),
             blink-caret .75s step-end infinite;
}
.font-18{
  width: 18em;
  animation: typing18 8.3s steps(18, end),
             blink-caret .75s step-end infinite;
}
.font-19{
  width: 19em;
  animation: typing19 8.4s steps(19, end),
             blink-caret .75s step-end infinite;
}
.font-20{
  width: 20em;
  animation: typing20 8.5s steps(20, end),
             blink-caret .75s step-end infinite;
}
@keyframes typing1 {
  from {
    width: 0;
  }
  to {
    width: 1em;
  }
}
@keyframes typing2 {
  from {
    width: 0;
  }
  to {
    width: 2em;
  }
}
@keyframes typing3 {
  from {
    width: 0;
  }
  to {
    width: 3em;
  }
}
@keyframes typing4 {
  from {
    width: 0;
  }
  to {
    width: 4em;
  }
}
@keyframes typing5 {
  from {
    width: 0;
  }
  to {
    width: 5em;
  }
}
@keyframes typing6 {
  from {
    width: 0;
  }
  to {
    width: 6em;
  }
}
@keyframes typing7 {
  from {
    width: 0;
  }
  to {
    width: 7em;
  }
}
@keyframes typing8 {
  from {
    width: 0;
  }
  to {
    width: 8em;
  }
}
@keyframes typing9 {
  from {
    width: 0;
  }
  to {
    width: 9em;
  }
}
@keyframes typing10 {
  from {
    width: 0;
  }
  to {
    width: 10em;
  }
}
@keyframes typing11 {
  from {
    width: 0;
  }
  to {
    width: 11em;
  }
}
@keyframes typing12 {
  from {
    width: 0;
  }
  to {
    width: 12em;
  }
}
@keyframes typing13 {
  from {
    width: 0;
  }
  to {
    width: 13em;
  }
}
@keyframes typing14 {
  from {
    width: 0;
  }
  to {
    width: 14em;
  }
}
@keyframes typing15 {
  from {
    width: 0;
  }
  to {
    width: 15em;
  }
}
@keyframes typing16 {
  from {
    width: 0;
  }
  to {
    width: 16em;
  }
}
@keyframes typing17 {
  from {
    width: 0;
  }
  to {
    width: 17em;
  }
}
@keyframes typing18 {
  from {
    width: 0;
  }
  to {
    width: 18em;
  }
}
@keyframes typing19 {
  from {
    width: 0;
  }
  to {
    width: 19em;
  }
}
@keyframes typing20 {
  from {
    width: 0;
  }
  to {
    width: 20em;
  }
}

</style>
